<template>
	<div class="company-list-container p-4">
		<!-- 顶部搜索栏 -->
		<!-- 搜索栏（居中） -->
		<el-row justify="center" class="mb-2">

			<el-input v-model="keyword" placeholder="请输入关键词" class="mr-2" style="width: 33%;" @keyup.enter="onSearch" />
			<el-button type="primary" icon="Search" @click="onSearch">搜索</el-button>
			<el-button type="default" @click="onReset">重置</el-button>

		</el-row>

		<!-- 分类下拉 + 顶部菜单栏 -->
		<!-- 自定义导航栏结构 -->
		<div class="custom-nav-bar mb-4">
			<div class="nav-left">
				<el-dropdown @command="onCategorySelect">
					<el-button type="primary" plain icon="Menu">全部分类</el-button>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item v-for="cat in categories" :key="cat.name" :disabled="true">
								{{ cat.name }}
								<el-dropdown-menu slot="submenu">
									<el-dropdown-item v-for="sub in cat.children" :key="sub" :command="sub">
										{{ sub }}
									</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</div>

			<ul class="nav-menu">
				<li :class="{ active: activeMenu === 'home' }" @click="setMenu('home')">首页</li>
				<li :class="{ active: activeMenu === 'trade' }" @click="setMenu('trade')">交易中心</li>
				<li :class="{ active: activeMenu === 'user' }" @click="setMenu('user')">个人中心</li>
				<li :class="{ active: activeMenu === 'data' }" @click="setMenu('data')">数据中心</li>
				<li :class="{ active: activeMenu === 'service' }" @click="setMenu('service')">服务中心</li>
			</ul>
		</div>
		<div class="mall-home-container space-y-6 p-4">
			<!-- 商品卡片展示区 -->
			<el-card>
				<div class="text-base font-semibold mb-2">推荐商品</div>
				<el-row :gutter="20">
					<el-col :span="6" v-for="product in productList" :key="product.id">
						<el-card :body-style="{ padding: '12px' }" shadow="hover">
							<img :src="product.image" class="w-full h-40 object-cover rounded" />
							<div class="mt-2 font-medium">{{ product.name }}</div>
							<div class="text-sm text-gray-500 mt-1">价格：¥{{ product.price }}</div>
							<el-button type="primary" size="small" class="mt-2"
								@click="goToDetail(product.id)">查看详情</el-button>
						</el-card>
					</el-col>
				</el-row>
			</el-card>
		</div>
	</div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

const setMenu = (key) => {
	activeMenu.value = key
	const routeMap = {
		home: '/mall/home',
		data: '/mall/data',
		user: '/mall/user',
		trade: '/mall/trade',
		service: '/mall/service'
	}
	const path = routeMap[key]
	if (path) {
		router.push(path)
	} else {
		console.warn('未定义跳转路径:', key)
	}
}


const goToDetail = (productId) => {
	router.push({ name: 'ProductDetail', params: { id: productId } })
}

const keyword = ref('')
const filters = ref({
	region: '',
	type: '',
	founded: '不限'
})

const categories1 = [
	{ name: '光刻材料', items: ['EUV光刻胶', 'G线光刻胶', '紫外宽谱光刻胶', '电子光束刻胶'] },
	{ name: '抛光材料', items: ['氧化硅抛光液', '氧化铝抛光液', '纳米抛光液'] },
	{ name: '工艺化学品', items: ['显影液', '去胶剂', '清洗剂', '蚀刻液'] }
]

// 静态导入所有图片
const imageModules = import.meta.glob('../../assets/images/*.jpg', { eager: true })

const generateProducts = () => {
	let id = 1
	const result = []
	categories1.forEach(cat => {
		cat.items.forEach(sub => {
			const imgKey = `../../assets/images/${id}.jpg`
			const imagePath = imageModules[imgKey]?.default || ''
			console.log('🚀 图片路径:', imagePath)
			result.push({
				id: id++,
				name: `${sub} - ${cat.name}`,
				category: cat.name,
				price: (Math.random() * 500 + 100).toFixed(2),
				image: imagePath
			})
		})
	})
	return result.slice(0, 20)
}

const activeMenu = ref('home')

const categories = ref([
	{
		name: '光刻材料',
		children: ['电子光束刻胶', '紫外宽谱光刻胶', 'G线光刻胶', 'EUV光刻胶']
	},
	{
		name: '抛光材料',
		children: ['氧化硅抛光液', '氧化铝抛光液', '纳米抛光液']
	},
	{
		name: '工艺化学品',
		children: ['去胶剂', '显影液', '清洗剂', '蚀刻液']
	}
])

const currentCategory = ref('全部')
const currentSubCategory = ref('全部')

// 原始商品列表（全量）
const allProducts = generateProducts()
const productList = ref([...allProducts])

// 过滤方法
const applyFilters = () => {
	productList.value = allProducts.filter(product => {
		const matchKeyword = keyword.value.trim()
			? product.name.toLowerCase().includes(keyword.value.trim().toLowerCase())
			: true

		const matchCategory = currentCategory.value === '全部'
			|| product.category === currentCategory.value

		const matchSub = currentSubCategory.value === '全部'
			|| product.name.includes(currentSubCategory.value)

		return matchKeyword && matchCategory && matchSub
	})
}

// 顶部搜索触发
const onSearch = () => {
	console.log('🔍 搜索关键词:', keyword.value)
	applyFilters()
}

// 点击一级分类
const onMainCategoryClick = (category) => {
	currentCategory.value = category
	currentSubCategory.value = '全部'
	applyFilters()
}

// 点击二级分类
const onCategorySelect = (subCategory) => {
	console.log('🧭 二级分类:', subCategory)
	currentSubCategory.value = subCategory
	applyFilters()
}
const onReset = () => {
	keyword.value = ''
	currentCategory.value = '全部'
	currentSubCategory.value = '全部'
	productList.value = [...allProducts]
}


</script>

<style scoped>
.company-list-container {
	background-color: #f5f7fa;
	min-height: 100vh;
}

.el-menu--horizontal {
	border-bottom: none;
}

.el-dropdown-menu>>>.el-dropdown-menu {
	margin-left: 8px;
}

.custom-nav-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #ffffff;
	padding: 12px 16px;
	border-radius: 8px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
	flex-wrap: wrap;
}

.nav-left {
	margin-right: 24px;
}

.nav-menu {
	display: flex;
	gap: 20px;
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 14px;
}

.nav-menu li {
	cursor: pointer;
	padding: 4px 8px;
	transition: all 0.2s;
	border-radius: 4px;
}

.nav-menu li:hover {
	background-color: #f0f2f5;
}

.nav-menu li.active {
	background-color: #409EFF;
	color: white;
}
.mall-home-container {
	background-color: #f5f7fa;
	min-height: 100vh;
}
</style>
